import { useEffect, useState, useMemo, useCallback } from 'react';
import loadable from '@loadable/component';

import useAuthAction from '@/hooks/useAuthAction';
import { formatNumber } from '@/utils';
import { likeMerch, unLikeMerch, haveMerchUp, haveMerchDown, wantMerchUp, wantMerchDown } from '@/service/api';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));

export default ({dataSource={}, showLike=true, type}) => {
    const initState = () => ({
        merchInfo: dataSource || {},
    });
    const [state, setState] = useState(initState);
    const withAuth = useAuthAction();
    const isDesktop = useDevice() === DEVICES.DESKTOP;

    // 点赞
    const handleFanCore = async () => {
        // 1-已点击 2-未点击
        const { isLike, likeCount, goodsId, id } = state.merchInfo || {};
        const hasClick = 1 === isLike;
        const api = hasClick ? unLikeMerch : likeMerch;
        const [res, err] = await api({id: goodsId||id});
        if (err) return;
        setState(o => ({ ...o, merchInfo: { ...o.merchInfo, isLike: 1===o.merchInfo?.isLike ? 2 : 1, likeCount: 1===o.merchInfo?.isLike ? o.merchInfo?.likeCount - 1 : o.merchInfo?.likeCount + 1 } }));
    };
    const handleFan = (e) => {
        e?.preventDefault?.();
        e?.stopPropagation?.();
        withAuth(handleFanCore)(e);
    };
    // 我有
    const handleHaveCore = async () => {
        // 1-已点击 2-未点击
        const { isHaveIt, haveItCount, goodsId, id } = state.merchInfo || {};
        const hasClick = 1 === isHaveIt;
        const api = hasClick ? haveMerchDown : haveMerchUp;
        const [res, err] = await api({id: goodsId||id});
        if (err) return;
        setState(o => ({ ...o, merchInfo: { ...o.merchInfo, isHaveIt: 1===o.merchInfo?.isHaveIt ? 2 : 1, haveItCount: 1===o.merchInfo?.isHaveIt ? o.merchInfo?.haveItCount - 1 : o.merchInfo?.haveItCount + 1 } }));
    };
    const handleHave = (e) => {
        e?.preventDefault?.();
        e?.stopPropagation?.();
        withAuth(handleHaveCore)(e);
    };
    // 我要
    const handleWantCore = async () => {
        // 1-已点击 2-未点击
        const { isWantIt, wantItCount, goodsId, id } = state.merchInfo || {};
        const hasClick = 1 === isWantIt;
        const api = hasClick ? wantMerchDown : wantMerchUp;
        const [res, err] = await api({id: goodsId||id});
        if (err) return;
        setState(o => ({ ...o, merchInfo: { ...o.merchInfo, isWantIt: 1===o.merchInfo?.isWantIt ? 2 : 1, wantItCount: 1===o.merchInfo?.isWantIt ? o.merchInfo?.wantItCount - 1 : o.merchInfo?.wantItCount + 1 } }));
    };
    const handleWant = (e) => {
        e?.preventDefault?.();
        e?.stopPropagation?.();
        withAuth(handleWantCore)(e);
    };

    useEffect(() => {
        setState(o => ({...o, merchInfo: dataSource}));
    }, [dataSource]);

    const colors = {
        like: {'--bg': '#000', '--color': '#fff', '--active-bg': 'rgba(233, 115, 119, 1)', '--hover-bg': 'rgba(233, 115, 119, 0.8)'},
        have: {'--bg': '#000', '--color': '#fff', '--active-bg': 'rgba(93, 144, 39, 1)', '--hover-bg': 'rgba(93, 144, 39, 0.8)'},
        want: {'--bg': '#000', '--color': '#fff', '--active-bg': 'rgba(231, 123, 20, 1)', '--hover-bg': 'rgba(231, 123, 20, 0.8)'},
    };

    return (
        <div className={`${styles['container']} ${isDesktop?styles['desktop']:''}`}>
            { showLike &&
                <div style={colors.like} className={`${styles['act-button']} ${1===state.merchInfo?.isLike?styles['active']:''}`} onClick={handleFan}>
                    <div className={styles['icon']}><IconFont name={1===state.merchInfo?.isLike ? 'icon-aixin-2' : 2===state.merchInfo?.isLike ? 'icon-like-1' : 'icon-like-1'}/></div>
                    <div className={styles['name']}>赞 {formatNumber(state.merchInfo?.likeCount||0, 1)}</div>
                </div>
            }
            <div style={colors.have} className={`${styles['act-button']} ${1===state.merchInfo?.isHaveIt?styles['active']:''}`} onClick={handleHave}>
                <div className={styles['icon']}><IconFont name={ 1===state.merchInfo?.isHaveIt ? 'icon-duigou-2' : 2===state.merchInfo?.isHaveIt ? 'icon-have-1' : 'icon-have-1'}/></div>
                <div className={styles['name']}>我有 {formatNumber(state.merchInfo?.haveItCount||0, 1)}</div>
            </div>
            <div style={colors.want} className={`${styles['act-button']} ${1===state.merchInfo?.isWantIt?styles['active']:''}`} onClick={handleWant}>
                <div className={styles['icon']}><IconFont name={1===state.merchInfo?.isWantIt ? 'icon-circle-2' : 2===state.merchInfo?.isHaveIt ? 'icon-want-1' : 'icon-want-1'}/></div>
                <div className={styles['name']}>我要 {formatNumber(state.merchInfo?.wantItCount||0, 1)}</div>
            </div>
        </div>
    )
}
